<template>
  <div :class="prefixCls" class="login-background-img">
    <div v-show="type === 'login'">
      <div class="aui-content">
        <!-- 左侧logo -->
        <div class="leftOtherInfo">
          <div class="logoInfo">
            <span class="loginLogo"></span>
            <h2 class="logoText">天然气研究院</h2>
          </div>
          <!-- 欢迎文字 -->
          <div class="welcomeMessage">
            <h1 class="welcomeText">Hi,你好！</h1>
            <h1 class="projectTitle">欢迎进入实验室管理系统</h1>
            <h2 class="welcomeEn">Welcome to the Laboratory Management System</h2>
          </div>
        </div>



        <div class="aui-content-info">
          <!-- <div class="aui-title">
            <span
              style="
                font-size: 48px;
                font-family: Noto Sans SC-Bold, Noto Sans SC;
                font-weight: 900;
                color: #2b6562;
                text-shadow: 0 4px 4px rgba(46, 74, 100, 0.25);
              "
              >实验室综合管理平台</span
            ><br />
            <span style="font-size: 16px; font-family: Noto Sans SC-Bold, Noto Sans SC; font-weight: bold; color: #2b6562; letter-spacing: 2px"
              >LABORATORY INTEGRATED MANAGEMENT SYSTEM</span
            >
          </div> -->
          <div class="aui-container">
            <div class="aui-form">
              <div class="aui-formBox">
                <!-- <div class="aui-formWell"> -->
                <div class="aui-flex aui-form-nav investment_title">
                  <div class="aui-flex-box">
                    <span style="font-size: 30px; font-family: Noto Sans SC-Bold, Noto Sans SC; font-weight: bold; color: #568582">欢迎登录！</span>
                  </div>
                </div>
                <!-- <div class="aui-form-box" style="height: 180px"> -->
                <div class="aui-form-box">
                  <a-form ref="loginRef" :model="formData">
                    <div class="aui-inputClear aui-input">
                      <i class="icon icon-user"></i>
                      <a-form-item>
                        <a-input class="fix-auto-fill" :placeholder="t('sys.login.userName')" v-model:value="formData.username"> </a-input>
                      </a-form-item>
                    </div>
                    <div class="aui-inputClear aui-input">
                      <i class="icon icon-password"></i>
                      <a-form-item>
                        <a-input class="fix-auto-fill" type="password" :placeholder="t('sys.login.password')" v-model:value="formData.password" />
                      </a-form-item>
                    </div>
                    <div class="aui-input" style="width: 330px; position: relative">
                      <div class="aui-inputClear" style="width: 206px;!important">
                        <i class="icon icon-code"></i>
                        <a-form-item>
                          <a-input
                            class="fix-auto-fill"
                            type="text"
                            :placeholder="t('sys.login.inputCode')"
                            v-model:value="formData.inputCode"
                            @keyup.enter="loginHandleClick"
                          />
                        </a-form-item>
                      </div>
                      <div class="aui-code" style="height: 42px; right: 0px">
                        <img
                          v-if="randCodeData.requestCodeSuccess"
                          :src="randCodeData.randCodeImage"
                          @click="handleChangeCheckCode"
                          style="height: 100%; width: 100%; background-color: #009688"
                        />
                        <!-- <img v-else style="max-width: initial; height: 100%; background-color: #009688" :src="codeImg" @click="handleChangeCheckCode" /> -->
                        <img v-else style="height: 100%; background-color: #009688" :src="codeImg" @click="handleChangeCheckCode" />
                      </div>
                    </div>
                    <div class="aui-flex aui-input">
                      <div class="aui-flex-box">
                        <div class="aui-choice">
                          <a-input class="fix-auto-fill" type="checkbox" v-model:value="rememberMe" />
                          <span style="margin-left: 5px">{{ t('sys.login.rememberMe') }}</span>
                        </div>
                      </div>
                    </div>
                  </a-form>
                </div>
                <div class="aui-formButton">
                  <div class="aui-flex aui-input" style="position: relative; z-index: 9; margin: auto">
                    <a-button
                      :loading="loginLoading"
                      class="aui-link-login"
                      type="primary"
                      @click="loginHandleClick"
                      style="
                        width: 330px;
                        background: linear-gradient(160deg, #009688 0%, #11d6c3 100%);
                        font-size: 20px;
                        font-family: Noto Sans SC-Bold, Noto Sans SC;
                        font-weight: bold;
                        color: #eaf0ef;
                        line-height: 20px;
                        border: none;
                        border-radius: 4px;
                        letter-spacing: 2px;
                      "
                    >
                      登 录
                    </a-button>
                  </div>
                  <div class="gaussian"></div>
                </div>
              </div>

              <!-- </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- app下载 -->
    <!-- <div class="appDownContent">

      <a-popover placement="left">
        <template #content>
          <div class="appDownBox">
            <img :src="qrCodeImageUrl" class="appDownImg" alt="" />
            <p class="appDownTitle">app下载</p>
          </div>
        </template>
        <div class="appDownInfo">
          <span class="appDownIcon"></span>
        </div>
      </a-popover>


      <div class="appDownInfo">
        <span class="appDownIcon"></span>
      </div> -->
      <!-- <div class="appDownBox">
        <img :src="qrCodeImageUrl" alt="" />
      </div> -->
    <!-- </div> --> 
  </div>
</template>
<script lang="ts" setup name="login-mini">
  import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
  import { computed, onMounted, reactive, ref, toRaw, unref,nextTick } from 'vue';
  import codeImg from '/@/assets/images/checkcode.png';

  import { useUserStore } from '/@/store/modules/user';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { useDesign } from '/@/hooks/web/useDesign';

  // import { AndroidOutlined } from '@ant-design/icons-vue';

  const { prefixCls } = useDesign('mini-login');
  const { notification, createMessage } = useMessage();
  const userStore = useUserStore();
  const { t } = useI18n();
  // const localeStore = useLocaleStore();
  // const showLocale = localeStore.getShowPicker;
  const randCodeData = reactive<any>({
    randCodeImage: '',
    requestCodeSuccess: false,
    checkKey: null,
  });
  const rememberMe = ref<string>('0');
  //手机号登录还是账号登录
  const activeIndex = ref<string>('accountLogin');
  const type = ref<string>('login');
  //账号登录表单字段
  const formData = reactive<any>({
    inputCode: '',
    username: 'admin',
    password: '123456',
  });

  const loginRef = ref();

  const loginLoading = ref<boolean>(false);

  defineProps({
    sessionTimeout: {
      type: Boolean,
    },
  });

  /**
   * 获取验证码
   */
  function handleChangeCheckCode() {
    formData.inputCode = '';

    randCodeData.checkKey = 1629428467008;
    getCodeInfo(randCodeData.checkKey).then((res) => {
      randCodeData.randCodeImage = res;
      randCodeData.requestCodeSuccess = true;
    });
  }

  // /**
  //  * 切换登录方式
  //  */
  // function loginClick(type) {
  //   activeIndex.value = type;
  // }

  /**
   * 账号或者手机登录
   */
  async function loginHandleClick() {
    accountLogin();
    // if (unref(activeIndex) === 'accountLogin') {
    //   accountLogin();
    // } else {
    //   //手机号登录
    //   // phoneLogin();
    // }
  }

  async function accountLogin() {
    if (!formData.username) {
      createMessage.warn(t('sys.login.accountPlaceholder'));
      return;
    }
    if (!formData.password) {
      createMessage.warn(t('sys.login.passwordPlaceholder'));
      return;
    }
    try {
      loginLoading.value = true;
      const { userInfo } = await userStore.login(
        toRaw({
          password: formData.password,
          username: formData.username,
          captcha: formData.inputCode,
          checkKey: randCodeData.checkKey,
          mode: 'none', //不要默认的错误提示
        })
      );
      if (userInfo) {
        notification.success({
          message: t('sys.login.loginSuccessTitle'),
          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
          duration: 3,
        });
      }
    } catch (error) {
      notification.error({
        message: t('sys.api.errorTip'),
        description: error.message || t('sys.login.networkExceptionMsg'),
        duration: 3,
      });
      handleChangeCheckCode();
    } finally {
      loginLoading.value = false;
    }
  }

  // 二维码
  const qrCodeImageUrl = ref<string>('');
  const downAppModal = () => {
    let file_path = 'file:///D:/dzkdky/projects/app2/unpackage/release/apk/__UNI__EEA5608__20240313150738.apk';
    // 创建二维码实例
    nextTick(() => {
      let qr = new QRious({
        element: document.getElementById('qrcode'),
        value: file_path,
        size: 200,
      });
      qrCodeImageUrl.value = qr.toDataURL();
    });
  };

  onMounted(() => {
    //加载验证码
    handleChangeCheckCode();
    downAppModal();
  });
</script>

<style lang="less" scoped>
  @import '/@/assets/loginmini/style/home.less';
  @import '/@/assets/loginmini/style/base.less';
  
  .appDownContent{
    position: fixed;
    right: 0;
    top: 20%;
    .appDownInfo{
      width: 50px;
      height: 50px;
      background: rgba(76,168,180,.5);
      display: flex;
      justify-content: flex-end;
      &:hover{
        cursor: pointer;
      }
    }
    .appDownIcon{
      display: block;
      width: 40px;
      height: 50px;
      background: url('/@/assets/loginmini/icon/appDownIcon.png') no-repeat;
      background-size: 100% 100%;
      background-position: right center;
    }
  }
  .appDownImg{
    width: 150px;
    height: 150px;
  }
  .appDownTitle{
    font-size: 16px;
    text-align: center;
  }
  .aui-content{
    display: flex;
  }
  
  .leftOtherInfo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    // height: 90vh;
  }
  .logoInfo {
		position: absolute;
		display: flex;
		top: 100px;
		left: 108px;

		.loginLogo {
			width: 56px;
			height: 56px;
      background: url('/@/assets/loginmini/icon/loginLogo.png') no-repeat;
      background-size: 100% 100%;
      background-position: center;
		}

		.logoText {
			font-size: 30px;
			color: #FFFFFF;
			font-family: '微软雅黑';
			font-weight: normal;
			margin-left: 16px;
		}
	}
  .welcomeMessage {
		padding-left: 40px;
		display: flex;
		flex-direction: column;
		text-align: left;
		font-family: '微软雅黑';

		.welcomeText {
			font-size: 66px;
			color: #FFFFFF;
			font-weight: normal;
			line-height: 78px;
			white-space: nowrap;
		}

		.projectTitle {
			font-size: 66px;
			color: #fff;
			font-weight: bold;
			margin: 16px 0 32px 0;
			line-height: 78px;
		}

		.welcomeEn {
			font-size: 30px;
			color: #FFFFFF;
			font-weight: normal;
			line-height: 36px;
		}
	}

  :deep(.ant-input:focus) {
    box-shadow: none;
  }

  .aui-get-code {
    float: right;
    position: relative;
    z-index: 3;
    background: #ffffff;
    color: #1573e9;
    border-radius: 100px;
    padding: 5px 16px;
    margin: 7px;
    border: 1px solid #1573e9;
    top: 12px;
  }

  .aui-get-code:hover {
    color: #1573e9;
  }

  .code-shape {
    border-color: #dadada !important;
    color: #aaa !important;
  }

  :deep(.jeecg-dark-switch) {
    position: absolute;
    margin-right: 10px;
  }

  .aui-link-login {
    height: 42px;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 8px;
  }

  .aui-phone-logo {
    position: absolute;
    margin-left: 10px;
    width: 60px;
    top: 2px;
    z-index: 4;
  }

  .top-3 {
    top: 0.45rem;
  }
  .aui-content-info {
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 590px;
    min-width:500px;
    top: 0;
    bottom: 0;
    margin: auto;
    // left: 13%;
    right: 9%;
    padding-bottom: 50px;
  }

  .aui-title {
    max-width: 590px;
    // margin: 0 auto;
    // position: fixed;
    // top: 19%;
    // left: 28%;
    // width: 92%;
    height: auto;
    text-align: center;
    // -webkit-transform: translateX(-50%) translateY(-50%);
    // -moz-transform: translateX(-50%) translateY(-50%);
    // -ms-transform: translateX(-50%) translateY(-50%);
    // transform: translateX(-50%) translateY(-50%);
    // -webkit-transform: translateX(-50%) translateY(-50%);
  }
  .aui-container {
    // max-width: 450px;
    // top: 57%;
    max-width: 590px;
    margin: 0 auto;
    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    transform: translateX(0%) translateY(0%);
    -webkit-transform: translateX(0%) translateY(0%);
    margin-top: 20px;
  }

  .aui-input {
    // left: 15%;
  }
  .aui-inputClear {
    padding-left: 46px;
    border-bottom: none;
    .icon {
      left: 16px;
      top: 5px;
      width: 32px;
      height: 32px;
      background-position: center center;
      background-size: 100% 100%;
    }
    &:hover {
      border-bottom: none;
    }
  }
  .aui-formButton {
    position: relative;
    padding-bottom: 40px;
    padding-top: 0;
    display: flex;
  }
  .gaussian {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto auto;
    top: 15px;
    width: 330px;
    height: 103px;
    background: url('/@/assets/loginmini/icon/gaussian_icon.png') no-repeat;
    background-size: 100% 100%;
    z-index: 2;
  }
  .aui-form-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0) inset !important;
  }
  @media screen and (min-width: 1366px) and (max-width: 1919px) {
    .aui-title {
      // top: 15%;
    }
    .aui-content-info {
      // max-width: 450px;
      margin: auto 0%;
      // left: 9%;
      right: 9%;
    }
    .aui-container {
      max-width: 450px;
      // top: 57%;
    }
    .logoInfo {
      top: 70px;
      left:78px;
      .loginLogo {
        width: 50px;
        height: 50px;
      }
      .logoText {
        font-size: 26px;
      }
    }
    .welcomeMessage {
      padding-left: 10px;
      .welcomeText {
        font-size: 56px;
        line-height: 68px;
      }

      .projectTitle {
        font-size: 56px;
        line-height: 68px;
      }

      .welcomeEn {
        font-size: 26px;
        line-height: 30px;
      }
    }
  }
  @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    .aui-content-info {
      // max-width: 450px;
      margin: auto 0%;
      // left: 9%;
      right: 9%;
    }
    .logoInfo {
      top: 70px;
      left:78px;
      .loginLogo {
        width: 50px;
        height: 50px;
      }
      .logoText {
        font-size: 26px;
      }
    }
    .welcomeMessage {
      padding-left: 10px;
      .welcomeText {
        font-size: 56px;
        line-height: 68px;
      }

      .projectTitle {
        font-size: 56px;
        line-height: 68px;
      }

      .welcomeEn {
        font-size: 26px;
        line-height: 30px;
      }
    }
  }
</style>

<style lang="less">
  @prefix-cls: ~'@{namespace}-mini-login';
  @dark-bg: #293146;

  html[data-theme='dark'] {
    .@{prefix-cls} {
      background-color: @dark-bg !important;
      background-image: none;

      &::before {
        background-image: url(/@/assets/svg/login-bg-dark.svg);
      }

      .aui-inputClear {
        background-color: #232a3b !important;
      }

      .ant-input,
      .ant-input-password {
        background-color: #232a3b !important;
      }

      .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
        border: 1px solid #4a5569 !important;
      }

      &-form {
        background: @dark-bg !important;
      }

      .app-iconify {
        color: #fff !important;
      }

      .aui-inputClear input,
      .aui-input-line input,
      .aui-choice {
        color: #c9d1d9 !important;
      }

      .aui-formBox {
        background-color: @dark-bg !important;
      }

      .aui-third-text span {
        background-color: @dark-bg !important;
      }

      .aui-form-nav .aui-flex-box {
        color: #c9d1d9 !important;
      }

      .aui-formButton .aui-linek-code {
        background: @dark-bg !important;
        color: white !important;
      }

      .aui-code-line {
        border-left: none !important;
      }

      .ant-checkbox-inner,
      .aui-success h3 {
        border-color: #c9d1d9;
      }
    }

    input.fix-auto-fill,
    .fix-auto-fill input {
      -webkit-text-fill-color: #c9d1d9 !important;
      box-shadow: inherit !important;
    }

    &-sign-in-way {
      .anticon {
        font-size: 22px !important;
        color: #888 !important;
        cursor: pointer !important;

        &:hover {
          color: @primary-color !important;
        }
      }
    }

    .ant-divider-inner-text {
      font-size: 12px !important;
      color: @text-color-secondary !important;
    }

    .aui-third-login a {
      background: transparent;
    }
  }
</style>
